<template>
  <div class="dmt-box flex full_h">
    <div class="dmt-box-item full_h">
      <div class="sidebar-title">设备分类</div>
      <div class="category-list" v-for="(item,i) in deviceList" :key="i">
        <div class="category-item active">
          <!-- <span class="category-icon"></span> -->
          <i class="el-icon-setting"></i>
          <span>{{item.label}}</span>
        </div>
      </div>
    </div>
    <div class="dmt-box-item full_h f1 padd-15">
      <!-- 顶部操作栏 -->
      <div class="top-bar">
        <div class="search-box">
          <span class="search-icon">🔍</span>
          <input type="text" placeholder="搜索设备名称、型号..." />
        </div>
        <el-button class="add-btn">
          <span class="add-icon">+</span>
          <span>添加设备</span>
        </el-button>
      </div>
      <div class="device-section">
        <!-- 设备列表区域 -->
        <div class="section-header">
          <h3 class="section-title">生产设备</h3>
          <div class="section-actions">
            <button class="action-btn">备注</button>
            <button class="action-btn">配置</button>
          </div>
        </div>

        <div class="device-list">
          <!-- 设备卡片1 -->
          <div class="device-card" v-for="i in 10" :key="i">
            <div class="device-header">
              <div class="device-name">演示设备 A</div>
              <div class="device-model">型号: DEMO-A001</div>
            </div>
            <div class="device-info">
              <div>数量: 5台</div>
              <div>状态: 运行中</div>
            </div>
            <div class="device-actions">
              <button class="edit-btn" @click="edit">编辑</button>
              <button class="delete-btn">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :close-on-click-modal='false' :close-on-press-escape='false' title="编辑设备信息" :visible.sync="isEditDialog" width="60%" :before-close="handleEditClose">
    <div class="edit-main">
 <div class="modal-body">
          <div class="section-title">
            <span>设备基本信息</span>
            <button class="edit-toggle" id="editToggle">
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M14.06 9.02L14.98 9.94L5.92 19H5V18.08L14.06 9.02ZM17.66 3C17.41 3 17.15 3.1 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C18.17 3.09 17.92 3 17.66 3ZM14.06 6.19L3 17.25V21H6.75L17.81 9.94L14.06 6.19Z"
                  fill="currentColor"
                />
              </svg>
              编辑
            </button>
          </div>

          <div class="basic-info">
            <div class="info-item">
              <span class="info-label">设备类别</span>
              <span class="info-value" id="deviceCategory">生产设备</span>
            </div>
            <div class="info-item">
              <span class="info-label">设备名称</span>
              <span class="info-value" id="deviceName">演示用设备</span>
            </div>
            <div class="info-item">
              <span class="info-label">设备型号</span>
              <span class="info-value" id="deviceModel">DX-2023A</span>
            </div>
            <div class="info-item">
              <span class="info-label">维护周期</span>
              <span
                class="info-value editable"
                id="maintenanceCycle"
                contenteditable="false"
                >30天</span
              >
            </div>
            <div class="info-item">
              <span class="info-label">参数</span>
              <span
                class="info-value editable"
                id="parameters"
                contenteditable="false"
                >电压:220V,功率:2.5KW</span
              >
            </div>
          </div>

          <div class="section-title">设备信息</div>

          <div class="table-container">
            <table>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>集团设备卡编号</th>
                  <th>固定资产编号</th>
                  <th>固定资产卡片号</th>
                  <th>启用日期</th>
                  <th>在用地点</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>111111</td>
                  <td>112</td>
                  <td>113</td>
                  <td>2023-11-10 00:00:00</td>
                  <td>2</td>
                  <td><span class="status-running">运行中</span></td>
                  <td><button class="detail-btn">详情</button></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>111</td>
                  <td>111</td>
                  <td>111</td>
                  <td>2023-10-26 00:00:00</td>
                  <td>111</td>
                  <td><span class="status-running">运行中</span></td>
                  <td><button class="detail-btn">详情</button></td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>11124</td>
                  <td>1231</td>
                  <td>124</td>
                  <td>2023-10-27 00:00:00</td>
                  <td>152</td>
                  <td><span class="status-other">短信中</span></td>
                  <td><button class="detail-btn">详情</button></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        isEditDialog:false,
      deviceList: [
        {
          label: "生产设备"
        },
        {
          label: "电子设备"
        },
        {
          label: "运输工具"
        },
        {
          label: "内置及改造设备"
        },
        {
          label: "一键扩展通道"
        },
        {
          label: "主线、通用区"
        },
        {
          label: "装配工程"
        },
        {
          label: "办公设备"
        },
        {
          label: "其他操作类产品"
        }
      ]
    };
  },
  methods: {
    edit() {
      console.log("编辑设备");
      this.isEditDialog = true;
    },
    handleEditClose(e){
        console.log('关闭编辑窗口');
        this.isEditDialog = false;
    }
  }
};
</script>

<style scoped lang="scss">
.dmt-box-item:first-child {
  width: 170px;
  background: #fff;

  .sidebar-title {
    padding: 20px 15px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
  }
}
.dmt-box-item {
  box-sizing: border-box;
}
.category-item {
  padding: 10px 8px;
  padding-left: 15px;
}
/* 顶部操作栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 4px;
  padding: 8px 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: 400px;
}

.search-box input {
  border: none;
  outline: none;
  flex: 1;
  padding: 5px 10px;
  font-size: 14px;
}

.search-icon {
  color: #999;
  font-size: 16px;
}
/* 设备列表区域 */
.device-section {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

.section-actions {
  display: flex;
  gap: 10px;
}

.action-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: all 0.3s;
}

.action-btn:hover {
  background-color: #f5f5f5;
}

/* 设备列表 */
.device-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  box-sizing: border-box;
  // border: 1px solid red;
}

.device-card {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 15px;
  transition: all 0.3s;
}

.device-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.device-name {
  font-weight: bold;
  font-size: 16px;
  color: #2c3e50;
}

.device-model {
  color: #666;
  font-size: 14px;
}

.device-info {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.device-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.edit-btn,
.delete-btn {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.edit-btn {
  background-color: #e6f7ff;
  color: #1890ff;
}

.delete-btn {
  background-color: #fff2f0;
  color: #ff4d4f;
}



      .modal-body {
        padding: 20px;
      }

      .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
        padding-left: 8px;
        border-left: 4px solid #1a4b8c;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .edit-toggle {
        background: none;
        border: none;
        color: #1a4b8c;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .basic-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 25px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 6px;
        border: 1px solid #eaeaea;
      }

      .info-item {
        display: flex;
        flex-direction: column;
      }

      .info-label {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
      }

      .info-value {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        padding: 8px 12px;
        border-radius: 4px;
        transition: all 0.2s;
      }

      .info-value.editable {
        border: 1px dashed #ccc;
        background-color: white;
      }

      .info-value.editable:focus {
        outline: none;
        border: 1px solid #1a4b8c;
        background-color: #f0f7ff;
      }

      .table-container {
        overflow-x: auto;
        border: 1px solid #eaeaea;
        border-radius: 6px;
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th {
        background-color: #f8f9fa;
        padding: 12px 15px;
        text-align: left;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #eaeaea;
      }

      td {
        padding: 12px 15px;
        border-bottom: 1px solid #eaeaea;
        color: #555;
      }

      tr:last-child td {
        border-bottom: none;
      }

      tr:hover {
        background-color: #f8f9fa;
      }

      .status-running {
        color: #52c41a;
        background-color: #f6ffed;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }

      .status-other {
        color: #fa8c16;
        background-color: #fff7e6;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }

      .detail-btn {
        background-color: #1a4b8c;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: background-color 0.2s;
      }

      .detail-btn:hover {
        background-color: #1a4b8c;
      }

      .modal-footer {
        padding: 15px 20px;
        background-color: #f8f9fa;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        border-top: 1px solid #eaeaea;
      }

      .confirm-btn {
        background-color: #1a4b8c;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
      }

      .confirm-btn:hover {
        background-color: #1a4b8c;
      }

      .cancel-btn {
        background-color: #f0f0f0;
        color: #666;
        border: none;
        padding: 8px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
      }

      .cancel-btn:hover {
        background-color: #e0e0e0;
      }
</style>